<template>
  <div class="box-list-container">
    <div class="box-query-form">
      <el-form :model="queryParam" label-width="auto" label-position="right" :gutter="24">
        <el-row>
          <el-col :span="24">
            <el-form-item label="任务进度:">
              <div class="dispalyFlex">
                <el-button type="success" size="small" @click="stateCheckAllS">全选</el-button>
                <el-button type="info" size="small" style="margin-right: 10px;" @click="stateCheckOutAllS">全不选</el-button>
                <el-checkbox-group v-model="queryParam.scheduleInfo" size="small">
                  <el-checkbox-button v-for="item in scheduleInfoList" :key="item.code" :label="item.code">{{ item.name }}</el-checkbox-button>
                </el-checkbox-group>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="客户来源:">
              <div class="dispalyFlex">
                <el-button type="success" size="small" @click="stateCheckAll">全选</el-button>
                <el-button type="info" size="small" style="margin-right: 10px;" @click="stateCheckOutAll">全不选</el-button>
                <el-checkbox-group v-model="queryParam.customerSource" size="small">
                  <!-- <el-checkbox-button v-for="item in customerSourceList" :key="item.ly" :label="item.ly">{{ item.ly }}</el-checkbox-button> -->
                  <el-checkbox-button v-for="item in customerSourceListCom" :key="item.ly" :label="item.ly">{{ item.ly }}</el-checkbox-button>
                </el-checkbox-group>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否上线:">
              <div class="dispalyFlex">
                <el-button type="success" size="small" @click="onlineCheckAll">全选</el-button>
                <el-button type="info" size="small" style="margin-right: 10px;" @click="onlineCheckOutAll">全不选</el-button>
                <el-checkbox-group v-model="queryParam.isOnline" size="small">
                  <el-checkbox-button v-for="item in isOnlineList" :key="item.code" :label="item.code">{{ item.name }}</el-checkbox-button>
                </el-checkbox-group>
              </div>
            </el-form-item>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="24">
            <el-form-item label="id:">
              <el-input v-model="queryParam.id" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="24">
            <el-form-item label="APPid:">
              <el-input v-model="queryParam.APPid" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12" :sm="24">
            <el-form-item label="产品名称:">
              <el-input v-model="queryParam.productName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <template v-if="toggleSearchStatus">
            <el-col :xl="12" :lg="12" :md="12" :sm="24">
              <el-form-item label="开始时间:">
                <el-date-picker
                  v-model="queryParam.timeTemp1"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right"
                  @change="getTimeScope1"
                />
              </el-form-item>
            </el-col>
            <el-col :xl="12" :lg="12" :md="12" :sm="24">
              <el-form-item label="结束时间:">
                <el-date-picker
                  v-model="queryParam.timeTemp2"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right"
                  @change="getTimeScope2"
                />
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="是否匀速(开关):">
                <el-select v-model="queryParam.isConstantSpeed" filterable clearable placeholder="请选择">
                  <el-option v-for="item in switchList" :key="item.code" :value="item.code" :label="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="屏蔽越狱(开关):">
                <el-select v-model="queryParam.maskJailbreak" filterable clearable placeholder="请选择">
                  <el-option v-for="item in switchList" :key="item.code" :value="item.code" :label="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="时长:">
                <el-input v-model="queryParam.duration" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="点击间隔:">
                <el-input v-model="queryParam.clickInterval" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="VPN(开关):">
                <el-select v-model="queryParam.VPN" filterable clearable placeholder="请选择">
                  <el-option v-for="item in switchList" :key="item.code" :value="item.code" :label="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="接口id:">
                <el-input v-model="queryParam.portId" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="回调任务(开关):">
                <el-select v-model="queryParam.callbackTask" filterable clearable placeholder="请选择">
                  <el-option v-for="item in switchList" :key="item.code" :value="item.code" :label="item.name" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="APPBID:">
                <el-input v-model="queryParam.APPBID" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="跳转id:">
                <el-input v-model="queryParam.skipId" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="搜索名称:">
                <el-input v-model="queryParam.searchName" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="应用列表名称:">
                <el-input v-model="queryParam.applicationListName" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="客户信息来源:">
                <el-input v-model="queryParam.customerInformationSource" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="防作弊检测:">
                <el-input v-model="queryParam.antiCheatDetection" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="绕过版本(开关):">
                <el-select v-model="queryParam.bypassVersion" filterable clearable placeholder="请选择">
                  <el-option v-for="item in switchList" :key="item.code" :value="item.code" :label="item.name" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="设备">
                <el-select v-model="queryParam.device" filterable clearable placeholder="请选择">
                  <el-option value="1" label="1" />
                  <el-option value="0" label="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="备注1:">
                <el-input v-model="queryParam.remark1" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="备注2:">
                <el-input v-model="queryParam.remark2" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="备注3:">
                <el-input v-model="queryParam.remark3" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="备注4:">
                <el-input v-model="queryParam.remark4" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24">
              <el-form-item label="备注5:">
                <el-input v-model="queryParam.remark5" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <!-- <el-col :xl="12" :lg="12" :md="12" :sm="24">
              <el-form-item label="最后修改时间:">
                <el-date-picker
                  v-model="queryParam.timeTemp3"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right"
                  @change="getTimeScope3"
                />
              </el-form-item>
            </el-col> -->
            <el-col :xl="12" :lg="12" :md="12" :sm="24">
              <el-form-item label="创建时间:">
                <el-date-picker
                  v-model="queryParam.timeTemp4"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right"
                  @change="getTimeScope4"
                />
              </el-form-item>
            </el-col>
          </template>
          <el-col :xl="6" :lg="6" :md="12" :sm="24" class="table-search-btn">
            <el-button icon="el-icon-refresh" @click="searchReset">重置</el-button>
            <el-button type="primary" icon="el-icon-search" @click="searchQuery">查询</el-button>
            <el-link style="margin-left: 10px;" type="primary" :underline="false" @click="toggleSearchStatus = !toggleSearchStatus">
              {{ toggleSearchStatus ? '收起' : '展开' }}
              <i :class="toggleSearchStatus ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
            </el-link>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="box-table">
      <div class="table-title">
        <div class="table-title-left">
          主表列表({{ dataSource.length }})
        </div>
        <div>
          <el-button plain class="btnAdd" icon="el-icon-plus" style="margin-right: 10px;" @click="handleAdd('新增')">新增</el-button>
          <el-popover
            placement="left"
            width="600"
            trigger="click"
          >
            <el-checkbox-group v-model="mTColShow" @change="showColItemChange">
              <el-checkbox v-for="item in colNameDictList" :key="item.code" :label="item.code">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
            <el-button slot="reference">显示隐藏列</el-button>
          </el-popover>
        </div>
      </div>
      <!-- 批量操作 -->
      <div v-if="selectedRowList.length" class="batchAction">
        <div class="batchAction-left">
          <el-dropdown>
            <el-button>
              批量操作 <i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div @click="batchDelete"><i class="el-icon-delete" />删除</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="batchAction-right">
          已选择
          <span style="font-weight: 700">
            <el-link type="primary" :underline="false">{{ selectedRowList.length }}</el-link>
          </span>项
          <el-link type="primary" :underline="false" style="margin-left: 24px;" @click="onClearSelected">清空</el-link>
        </div>
      </div>
      <el-table ref="table" :data="dataSource" @selection-change="onSelectChange">
        <el-table-column type="selection" width="55" />
        <!-- 设备 -->
        <el-table-column v-if="mTColShow.includes('device')" fixed="left" prop="outputParam" label="" width="30">
          <template slot-scope="scope">
            <i v-if="scope.row.device === '1'" class="el-icon-s-help coldevice1" />
            <i v-else-if="scope.row.device === '0'" class="el-icon-s-help coldevice0" />
          </template>
        </el-table-column>
        <el-table-column v-if="mTColShow.includes('id')" fixed="left" prop="id" label="ID" width="60" />
        <el-table-column v-if="mTColShow.includes('APPid')" fixed="left" prop="APPid" label="APPid" min-width="150" />
        <el-table-column v-if="mTColShow.includes('productName')" fixed="left" prop="productName" label="产品名称" min-width="150" />
        <el-table-column v-if="mTColShow.includes('subTableCount')" prop="subTableCount" label="关键词数量" width="100">
          <template slot-scope="scope">
            <el-link type="primary" @click="openSubTable(scope.row)">{{ scope.row.subTableCount }}</el-link>
          </template>
        </el-table-column>
        <el-table-column v-if="mTColShow.includes('TotalSchedule')" prop="TotalSchedule" label="进度" width="70" />
        <el-table-column v-if="mTColShow.includes('TotalUpperLimit')" prop="TotalUpperLimit" label="上限" width="70" />
        <el-table-column v-if="mTColShow.includes('percentage')" prop="percentage" label="百分比" width="80" />
        <el-table-column v-if="mTColShow.includes('clickNum')" prop="clickNum" label="点击数" width="100" />
        <el-table-column v-if="mTColShow.includes('callbackRate')" prop="callbackRate" label="回调率" width="100">
          <template slot-scope="scope">
            <div v-if="callbackRateCheckColor(scope.row.callbackRate) === 1" style="color: red;" class="sizeBig">{{ scope.row.callbackRate }}%</div>
            <div v-else-if="callbackRateCheckColor(scope.row.callbackRate) === 2" style="color: #E6E61A;" class="sizeBig">{{ scope.row.callbackRate }}%</div>
            <div v-else-if="callbackRateCheckColor(scope.row.callbackRate) === 3" style="color: blue;" class="sizeBig">{{ scope.row.callbackRate }}%</div>
            <div v-else-if="callbackRateCheckColor(scope.row.callbackRate) === 4" style="color: green;" class="sizeBig">{{ scope.row.callbackRate }}%</div>
          </template>
        </el-table-column>
        <el-table-column v-if="mTColShow.includes('startTime')" prop="startTime" label="开始时间" width="170" />
        <el-table-column v-if="mTColShow.includes('endTime')" prop="endTime" label="结束时间" width="170" />
        <el-table-column v-if="mTColShow.includes('skipId')" prop="skipId" label="跳转id" width="70" />
        <el-table-column v-if="mTColShow.includes('isConstantSpeed')" prop="isConstantSpeed" label="是否匀速" width="80">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isConstantSpeed"
              active-color="#13ce66"
              inactive-color="#eaecf0"
              active-value="开"
              inactive-value="关"
              @change="colSwitch(scope.row, 'isConstantSpeed')"
            />
          </template>
        </el-table-column>
        <el-table-column v-if="mTColShow.includes('customerInformationSource')" prop="customerInformationSource" label="客户信息来源" width="120" />
        <el-table-column v-if="mTColShow.includes('maskJailbreak')" prop="maskJailbreak" label="屏蔽越狱" width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.maskJailbreak"
              active-color="#13ce66"
              inactive-color="#eaecf0"
              active-value="开"
              inactive-value="关"
              @change="colSwitch(scope.row, 'maskJailbreak')"
            />
          </template>
        </el-table-column>
        <el-table-column v-if="mTColShow.includes('duration')" prop="duration" label="时长" width="70" />
        <el-table-column v-if="mTColShow.includes('clickInterval')" prop="clickInterval" label="点击间隔" width="100" />
        <el-table-column v-if="mTColShow.includes('VPN')" prop="VPN" label="VPN" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.VPN"
              active-color="#13ce66"
              inactive-color="#eaecf0"
              active-value="开"
              inactive-value="关"
              @change="colSwitch(scope.row, 'VPN')"
            />
          </template>
        </el-table-column>
        <el-table-column v-if="mTColShow.includes('portId')" prop="portId" label="接口id" width="100" />
        <el-table-column v-if="mTColShow.includes('callbackTask')" prop="callbackTask" label="回调任务" width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.callbackTask"
              active-color="#13ce66"
              inactive-color="#eaecf0"
              active-value="开"
              inactive-value="关"
              @change="colSwitch(scope.row, 'callbackTask')"
            />
          </template>
        </el-table-column>
        <el-table-column v-if="mTColShow.includes('APPBID')" prop="APPBID" label="APPBID" width="300" />
        <el-table-column v-if="mTColShow.includes('searchName')" prop="searchName" label="搜索名称" width="100" />
        <el-table-column v-if="mTColShow.includes('applicationListName')" prop="applicationListName" label="应用列表名称" width="120" />
        <el-table-column v-if="mTColShow.includes('antiCheatDetection')" prop="antiCheatDetection" label="防作弊检测" width="100" />
        <el-table-column v-if="mTColShow.includes('bypassVersion')" prop="bypassVersion" label="绕过版本" width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.bypassVersion"
              active-color="#13ce66"
              inactive-color="#eaecf0"
              active-value="开"
              inactive-value="关"
              @change="colSwitch(scope.row, 'bypassVersion')"
            />
          </template>
        </el-table-column>
        <el-table-column v-if="mTColShow.includes('outputParam')" prop="outputParam" label="输出参数" width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.outputParam"
              active-color="#13ce66"
              inactive-color="#eaecf0"
              active-value="开"
              inactive-value="关"
              @change="colSwitch(scope.row, 'outputParam')"
            />
          </template>
        </el-table-column>
        <el-table-column v-if="mTColShow.includes('remark1')" prop="remark1" label="备注1" width="100" />
        <el-table-column v-if="mTColShow.includes('remark2')" prop="remark2" label="备注2" width="100" />
        <el-table-column v-if="mTColShow.includes('remark3')" prop="remark3" label="备注3" width="100" />
        <el-table-column v-if="mTColShow.includes('remark4')" prop="remark4" label="备注4" width="100" />
        <el-table-column v-if="mTColShow.includes('remark5')" prop="remark5" label="备注5" width="100" />
        <el-table-column v-if="mTColShow.includes('zTableUpdateTime')" fixed="right" prop="zTableUpdateTime" label="最后修改时间" width="170" />
        <!-- <el-table-column fixed="right" prop="subTableCount" label="子表总数" width="80">
          <template slot-scope="scope">
            <el-link type="primary" @click="openSubTable(scope.row)">{{ scope.row.subTableCount }}</el-link>
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="createTime" label="创建时间" width="170" /> -->
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <!-- <el-button type="text" @click="handleEdit('查看', scope.row, true)">查看</el-button> -->
            <el-button type="text" @click="handleEdit('编辑', scope.row)">编辑</el-button>
            <el-popconfirm title="确定删除吗？" style="margin-left: 10px" @confirm="handleDelete(scope.row[guidFieldName])">
              <el-button slot="reference" type="text" style="color: red;">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="box-paging">
        <Pagination
          v-show="ipagination.total > 0"
          layout="total, sizes, prev, pager, next"
          :total="ipagination.total"
          :page.sync="ipagination.pageNum"
          :limit.sync="ipagination.pageSize"
          @pagination="loadData"
        />
      </div>
    </div>
    <handleDrawer ref="modalForm" @ok="modalFormOk" />
    <handleDialogSubTable ref="handleDialogSubTable" @ok="modalFormOk" />
  </div>
</template>

<script>
import { listMixin } from '@/mixins/listMixin'
import { postAction } from '@/api/manage'
import Pagination from '@/components/Pagination'
import handleDrawer from './components/handleDrawer'
import handleDialogSubTable from './components/handleDialogSubTable'
import { switchList, colNameDictList } from '@/utils/publicData'
import { pinyin } from 'pinyin-pro'

export default {
  components: {
    Pagination,
    handleDrawer,
    handleDialogSubTable
  },
  mixins: [listMixin],
  data() {
    return {
      colNameDictList: colNameDictList,
      guidFieldName: 'id',
      ipagination: {
        pageNum: 1,
        pageSize: 100,
        total: 0
      },
      customerSourceList: [],
      isOnlineList: [
        { name: '未上线', code: '未上线' },
        { name: '已上线', code: '已上线' }
      ],
      scheduleInfoList: [
        { name: '未开始', code: '未开始' },
        { name: '未完成', code: '未完成' },
        { name: '已完成', code: '已完成' }
      ],
      queryParam: {
        customerSource: [],
        isOnline: [],
        scheduleInfo: []
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      switchList: switchList,
      toggleSearchStatus: false,
      mTColShow: this.$ls.get('masterTableColShow') || [],
      userInfo: this.$ls.get('USER_INFO') || {},
      url: {
        list: 'masterTable.aspx?action=GetList',
        delete: 'masterTable.aspx?action=Delete',
        deleteBatch: 'masterTable.aspx?action=DeleteBatch'
      }
    }
  },
  computed: {
    // 计算属性，用于存储排序后的数据源
    customerSourceListCom() {
      const self = this
      return this.customerSourceList.slice().sort((a, b) => {
        if (!a.ly || !b.ly) {
          // 如果任何一个ly为null或undefined，将它们放在最后
          if (!a.ly && !b.ly) return 0
          if (!a.ly) return 1
          if (!b.ly) return -1
        }
        const aInitial = self.getInitialPinyin(a.ly)
        const bInitial = self.getInitialPinyin(b.ly)
        if (aInitial < bInitial) return -1
        if (aInitial > bInitial) return 1
        return 0
      })
    }
  },
  watch: {
    'queryParam.scheduleInfo': {
      handler(v) {
        if (v) {
          if (v && v.length) {
            this.ipagination.pageNum = 1
            this.ipagination.pageSize = 10000
          }
        }
      }
    }
  },
  created() {
    this.GetLaiYuanCom()
  },
  mounted() {},
  methods: {
    // 检测回报率颜色
    callbackRateCheckColor(c) {
      if (c) {
        if (c > 0 && c <= 30) {
          return 1
        } else if (c > 30 && c <= 50) {
          return 2
        } else if (c > 50 && c <= 70) {
          return 3
        } else if (c > 70) {
          return 4
        }
      }
    },
    // 获取字符串首字的拼音首字母
    getInitialPinyin(str) {
      if (!str || str.length === 0) return ''
      const firstChar = str[0]
      // 如果是汉字，则获取拼音；如果是其他字符，则直接返回该字符
      if (/[\u4e00-\u9fa5]/.test(firstChar)) {
        let initials = pinyin(firstChar, { toneType: 'none', type: 'initial' }).toUpperCase()
        initials = initials.length > 1 ? initials[0] : initials
        // console.log('initials1', initials)
        // 确保返回的是单个字母，如果不是字母则返回空字符串
        return /^[A-Z]$/.test(initials) ? initials : ''
      } else {
        // 对于非汉字字符，直接返回大写形式的第一个字母
        return firstChar.toUpperCase()
      }
    },
    // 获取来源下拉数据
    GetLaiYuanCom(data) {
      this.$store.dispatch('app/setLoading', true)
      postAction('masterTable.aspx?action=GetLaiYuanCom', data).then(res => {
        if (res.code === 1) {
          this.customerSourceList = res.data
        } else {
          this.$message.warning(res.message)
        }
      }).catch((res) => {
        this.$message.error(res.message)
      }).finally(() => {
        this.$store.dispatch('app/setLoading', false)
      })
    },
    // (开关)
    colSwitch(row, text) {
      this.updColData({
        ziduan: text,
        colContent: row[text],
        id: row.id
      })
    },
    updColData(data) {
      this.$store.dispatch('app/setLoading', true)
      postAction('masterTable.aspx?action=updColData', data).then(res => {
        if (res.code === 1) {
          this.$message.warning(res.message)
          this.loadData(1)
        } else {
          this.$message.warning(res.message)
        }
      }).catch((res) => {
        this.$message.error(res.message)
      }).finally(() => {
        this.$store.dispatch('app/setLoading', false)
      })
    },
    // 打开子表
    openSubTable(row) {
      this.$refs.handleDialogSubTable.show(row)
      this.$refs.handleDialogSubTable.title = '子表'
    },
    handleEdit(title, rowData, disableSubmit) {
      this.$refs.modalForm.edit(rowData)
      this.$refs.modalForm.title = title
      this.$refs.modalForm.disableSubmit = disableSubmit
    },
    // 查询完后处理列表数据
    disposeListData(list) {
      list.forEach(element => {
        if (element.TotalSchedule && element.TotalUpperLimit) {
          element.percentage = this.calculatePercentage(element.TotalSchedule, element.TotalUpperLimit) + '%'
        }
        if (element.TotalSchedule && element.clickNum) {
          element.callbackRate = this.calculatePercentage(element.TotalSchedule, element.clickNum)
        }
      })
      return list || []
    },
    calculatePercentage(numerator, denominator) {
      // 检查分母是否为零，避免除以零的错误
      if (denominator === 0) {
        return '无法计算，分母不能为零'
      }
      // 计算百分比
      const percentage = (numerator / denominator) * 100
      // 保留两位小数
      const formattedPercentage = percentage.toFixed(2)
      // 转换回数字（如果需要的话，但通常保留为字符串形式即可
      // let numberPercentage = parseFloat(formattedPercentage);
      // 返回百分比字符串
      return formattedPercentage
    },
    // 选中列
    showColItemChange(c) {
      if (c && c.length) {
        this.$ls.set('masterTableColShow', c)
      }
    },
    // 重置
    searchReset() {
      this.queryParam = {
        customerSource: [],
        isOnline: [],
        scheduleInfo: []
      }
      this.loadData(1)
    },
    // 全选
    stateCheckAll() {
      this.queryParam.customerSource = this.customerSourceList.map(v => v.ly)
    },
    // 全不选
    stateCheckOutAll() {
      this.queryParam.customerSource = []
    },
    // 全选
    onlineCheckAll() {
      this.queryParam.isOnline = this.isOnlineList.map(v => v.code)
    },
    // 全不选
    onlineCheckOutAll() {
      this.queryParam.isOnline = []
    },
    // 全选
    stateCheckAllS() {
      this.queryParam.scheduleInfo = this.scheduleInfoList.map(v => v.code)
    },
    // 全不选
    stateCheckOutAllS() {
      this.queryParam.scheduleInfo = []
    },
    // 开始时间
    getTimeScope1(e) {
      if (e) {
        this.queryParam.stime1 = this.$moment(e[0]).format('YYYY-MM-DD HH:mm:ss')
        this.queryParam.stime2 = this.$moment(e[1]).format('YYYY-MM-DD HH:mm:ss')
      } else {
        this.queryParam.stime1 = ''
        this.queryParam.stime2 = ''
      }
    },
    // 结束时间
    getTimeScope2(e) {
      if (e) {
        this.queryParam.etime1 = this.$moment(e[0]).format('YYYY-MM-DD HH:mm:ss')
        this.queryParam.etime2 = this.$moment(e[1]).format('YYYY-MM-DD HH:mm:ss')
      } else {
        this.queryParam.etime1 = ''
        this.queryParam.etime2 = ''
      }
    },
    // 最后修改时间
    getTimeScope3(e) {
      if (e) {
        this.queryParam.updateTime1 = this.$moment(e[0]).format('YYYY-MM-DD HH:mm:ss')
        this.queryParam.updateTime2 = this.$moment(e[1]).format('YYYY-MM-DD HH:mm:ss')
      } else {
        this.queryParam.updateTime1 = ''
        this.queryParam.updateTime2 = ''
      }
    },
    // 最后修改时间
    getTimeScope4(e) {
      if (e) {
        this.queryParam.createTime1 = this.$moment(e[0]).format('YYYY-MM-DD HH:mm:ss')
        this.queryParam.createTime2 = this.$moment(e[1]).format('YYYY-MM-DD HH:mm:ss')
      } else {
        this.queryParam.createTime1 = ''
        this.queryParam.createTime2 = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dispalyFlex{
  display: flex;
  align-items: center;
}
.sizeBig{
  font-weight: 700;
}
.el-icon-s-help{
  font-size: 14px;
}
.coldevice1{
  color: #32CD32;
}
.coldevice0{
  color: #FF0000;
}
</style>

